<template>
  <div>
    <Row type="flex" justify="center" class="code-row-bg">
      <Col span="6">
        <ul >
              <li class="messageLi" @click="getMessage(senderInfo.sender)" v-for="(senderInfo, index) in this.senderList">
                  <img :src="senderInfo.picUrl"  height="25" width="25" class="msgImage"/>
                  <Badge :count="1" overflow-count="999" class="demo-badge">
                    <!--todo 待完善-->
                     <span>{{senderInfo.name}}</span>
                  </Badge>
              </li>
        </ul>
      </Col>
      <Col span="18">
        <Scroll :on-reach-edge="handleReachEdge">
          <Card dis-hover v-for="(item, index) in messageInfoList" :key="index" style="margin: 32px 0">
             {{ item.title }}
              <div>
                {{ item.content }}
              </div>
          </Card>
        </Scroll>
      </Col>
    </Row>
    <br>
  </div>
</template>

<script>
  import { listBySender,getSenderList,markMessageRead } from '@/api/NotifyApi.js'
  import PubSub from 'pubsub-js' //引入PubSub
    export default {
        name: "messageAdmin",
      data() {
        return {
          messageInfoList:[], //消息列表
          senderList:[], //服务列表
        }
      },
      methods:{
        handleReachEdge (dir) {
          return new Promise(resolve => {
            setTimeout(() => {
              console.log("查询更多....")
              resolve();
            }, 100);
          });
        },
        getMessage(senderNumber){
          listBySender({senderNumber:senderNumber}).then(res => {
            if(res.data.code == 200){
              console.log("消息：",res.data.data);
              this.messageInfoList = [];
                res.data.data.forEach(item => {
                  this.messageInfoList.push(item);
                })
              //标记消息为已读
              markMessageRead({sender:senderNumber}).then(res => {
                if(res.data.code == 200){
                  console.log("标记成功");
                  //需要重新通知消息提醒
                  //通知leftMenu.vue组件刷新消息数量和滚动消息
                  let messageObj = {
                    content:event.data
                  }
                  //消息发布,在其他组件中订阅
                  PubSub.publish("messageNotify",messageObj);
                }
              });
            }else{
              this.$Message.error("获取消息失败");
            }
          })
        },
        getSenderList(){
          getSenderList().then(res => {
            if(res.data.code == 200){
              if(res.data.data){
                res.data.data.forEach(item => {
                  this.senderList.push(item);
                })
              }
            }else{
              this.$Message.error("获取服务号失败");
            }
          })
        }
      },
      created(){
          this.getSenderList();
      }
    }
</script>

<style scoped>
  .messageLi{
    list-style-type: none;
    line-height: 100px;/*行内元素不能设置高度，但可以设置行高*/
    text-align: center;/*让li内的内容水平居中，行内元素默认垂直居中*/
  }
  .content{
    text-align: center;
  }
  .msgImage{

  }
  .demo-badge{

  }
</style>
